class Cart{
    constructor(){
        // 从购物车里面取出数据
        this.list = JSON.parse(localStorage.getItem('cart')) || []
        // 获取元素
        this.tbody = document.querySelector('tbody')
        this.cartTable = document.querySelector('.cartTable')
        this.totalNum = document.querySelector('.totalNum')
        this.money = document.querySelector('.money')
        this.selectAll = document.querySelector('.selectAll')

        this.init()
    }
    init(){
        this.render()
        this.bindHtml()
        this.total()
    }
    render(){
        // 判断下购物车里面有没有数据
        if(!this.list.length){
            this.tbody.innerHTML = `
            <tr height="100">
                <td colspan="6">
                    <h3>亲，你的购物车里面空空如也！赶紧去购物吧! <a href="../index.html">Go</a></h3>
                </td>
            </tr>
        `
        }else{
            this.tbody.innerHTML = ''
            this.list.forEach(item=>{
                this.tbody.innerHTML += `
                <tr>
                    <td><input type="checkbox" value="" class="select" data-id="${item.goods_id}" ${item.is_select && "checked"}/></td>
                    <td>
                        <img src="${item.img_small_logo}" >
                        <span class="hide">${item.title}</span>
                    </td>
                    <td><span>${item.price}</span></td>
                    <td>
                        <span class="sub" data-id="${item.goods_id}">-</span>
                        <input type="text" value="${item.cart_number}" />
                        <span class="add" data-id="${item.goods_id}">+</span>
                    </td>
                    <td><span class="price">${item.price*item.cart_number}元</span></td>
                    <td><span class="del" data-id="${item.goods_id}">删除</span></td>
                </tr>
                `
            })
        }
        // 数据可持续化
        localStorage.setItem('cart', JSON.stringify(this.list))
    }
    //注意点：现在的开发方式由之前的操作DOM节点形式变为操作数据驱动页面方式
    bindHtml(){
        this.cartTable.onclick = (e)=>{
            let target = e.target || e.srcElement
            // 全选功能
            if(target.className == 'selectAll'){
                let type = target.checked
                this.list.forEach(item=>{
                    item.is_select = type
                })
                this.render()
                this.total()
            }
            // 单选功能
            if(target.className == 'select'){
                let id = target.dataset.id - 0
                // 找到数组里面对应的数据修改数据的状态
                let goods = this.list.find(item=>{return item.goods_id == id})
                goods.is_select = !goods.is_select
                this.render()
                this.total()
            }
            // 点击增加商品数量
            if(target.className == 'add'){
                let id = target.dataset.id - 0
                let goods = this.list.find(item=>{return item.goods_id == id})
                // 注意点：这个地方工作中根据商品库存决定，不能固定现在主要是为了方便调试代码
                if(goods.cart_number==10){
                    alert('亲，只能购买这么多哦！')
                    return false
                }
                goods.cart_number++
                this.render()
                this.total()
            }
            // 点击减少商品数量
            if(target.className == 'sub'){
                let id = target.dataset.id - 0
                let goods = this.list.find(item=>{return item.goods_id == id})
                //注意点：这个地方工作中跟进商品库存决定，不能固定现在主要是为了方便调试代码
                if(goods.cart_number==1){
                    return false
                }
                goods.cart_number--
                this.render()
                this.total()
            }
            // 点击删除商品数量
            if(target.className == 'del'){
                let id = target.dataset.id - 0
                let index = this.list.findIndex(item=>{return item.goods_id == id})
                this.list.splice(index, 1)
                this.render()
                this.total()
                if(!this.list.length){
                    this.selectAll.checked = false
                }
            }
            // 点击清空购物车
            if(target.className == 'dlAll'){
                // 遍历数组，进行过滤
                let res = this.list.filter(item=>{
                    // 把数组里面没有选中状态的给过滤出来，剩余的就是选中的
                    return item.is_select == false
                })
                // 重新赋值
                this.list =res
                this.render()
                this.total()
                if(!this.list.length){
                    this.selectAll.checked = false
                }
            }
        }
    }
    total(){
        let num = 0
        let price = 0
        this.list.forEach(item=>{
            // 总价和总的数量必须是选中状态下计算
            if(item.is_select == true){
                num += item.cart_number
                price += item.cart_number * item.price
                let res = this.list.every(item=>{return item.is_select == true})
                if(res){
                    this.selectAll.checked = true
                }else{
                    this.selectAll.checked = false
                }
            }
        })
        this.totalNum.innerHTML = num
        this.money.innerHTML = price
    }
}
new Cart()